<template>
  <view class="shop-upload">

    <view>
      <view style="font-size: 28rpx;margin-bottom: 20rpx;margin-top: 40rpx">
        商品封面
      </view>
      <u-upload @on-choose-complete="onChooseComplete" :auto-upload="false" width="690" height ="300" :custom-btn="true"  max-count="1">
        <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
          <u-icon name="photo" size="60" :color="$u.color['lightColor']"></u-icon>
        </view>
      </u-upload>
    </view>

    <view style="font-size: 28rpx;margin-bottom: 20rpx;margin-top: 40rpx">
      商品介绍
    </view>
    <view class="" style="background-color:#f7f7f8;margin-top: 20rpx">
      <u-input :clearable="false" placeholder="请输入20个字以内的商品介绍" :custom-style="customStyle1" v-model="shopData.title" type="textarea" maxlength="20" :border="true" height="100" :auto-height="true" />
    </view>
    <view>
      <u-button :custom-style="customStyle" shape="circle" @click="submit">上传商品</u-button>
    </view>
  </view>
</template>

<script>
import {pathToBase64} from "image-tools";
import {saveGoods} from "../../../api/shop";

export default {
  name: "index",
  data() {
    return{
      shopData:{},
      customStyle1:{
        backgroundColor: '#f7f7f8',
        color: '#9a9a9a'
      },
      customStyle: {
        marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
        color: 'white',
        backgroundColor:'#10d169',
      }
    }
  },
  methods:{
    async submit() {

      for (const e in this.shopData) {
        if (!this.shopData[e]){
          this.$refs.uToast.show({
            title: '请完善数据',
            type: 'error',
          })
          return false
        }
      }

      let shopInfo = uni.getStorageSync('shopInfo');
      const res = await saveGoods({
        f_business_id:shopInfo.id,
        title:this.shopData.title,
        link:this.shopData.link
      });
      uni.navigateBack({
        delta: 1
      });
    },
    onChooseComplete(lists) {
      pathToBase64(lists[0].url).then(data=>{
        this.shopData.link = data
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.shop-upload {
  min-height: 100vh;
  padding: 20rpx;
  .slot-btn {
    width: 710rpx;
    height: 300rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(244, 245, 246);
    border-radius: 10rpx;
  }

  .slot-btn__hover {
    background-color: rgb(235, 236, 238);
  }
}
</style>
